<template>
<!-- 导航栏 主页左侧 -->
<div class="centerLeft1" ref="menuLeft">
  <div class="menu"> 
    <div class="menu-box">
      <div class="item">
        <div class="text">
          <i class="el-icon-s-home" style="font-size:0.3rem; margin-right:0.2rem;"></i>
          <!-- <span>主页</span> -->
          <router-link to="/home" style="font-size:0.2rem; color:white">主页</router-link>
        </div>
      </div>
      <div class="item">
        <div class="text">
          <i class="el-icon-s-data" style="font-size:0.3rem; margin-right:0.2rem"></i>
          <!-- <span>概览</span> -->
          <router-link to="/overview" style="font-size:0.2rem; color:white">概览</router-link>
        </div>
      </div>
      <div class="item">
        <div class="text" @click="showChild">
          <i class="el-icon-s-grid" style="font-size:0.3rem; margin-right:0.2rem"></i>
          <span style="cursor:pointer">子系统</span>
        </div>
      </div>
      <div class="item">
        <div class="text" @click="showCenterL">
          <i class="el-icon-s-release" style="font-size:0.3rem; margin-right:0.2rem"></i>
          <span style="cursor:pointer">综合分析</span>
        </div>
      </div>
      <div class="item">
        <div class="text">
          <i class="el-icon-s-custom" style="font-size:0.3rem; margin-right:0.2rem"></i>
          <!-- <span style="cursor:pointer">用户管理</span> -->
          <router-link to="/users" style="font-size:0.2rem; color:white">用户管理</router-link>
        </div>
      </div>
      <div class="item">
        <div class="text">
          <i class="el-icon-s-finance" style="font-size:0.3rem; margin-right:0.2rem"></i>
          <!-- <span style="cursor:pointer">权限管理</span> -->
          <router-link to="/rights" style="font-size:0.2rem; color:white">权限管理</router-link>
        </div>
      </div>
    </div>
  </div>

  <!-- 开关 -->
  <div class="button">
      <div class="button-box"  @click="showMenu">
        <div class="icons">
          <svg t="1603439427147" class="icon" viewBox="0 0 2048 2048"><path d="M991.165262 443.021519L602.958867 38.910063A125.260899 125.260899 0 0 0 511.965528 0.000683a124.714803 124.714803 0 0 0-90.925078 38.90938L32.834056 443.021519c-40.069835 41.776387-34.95018 77.81876-28.328759 92.904678 4.778345 10.717145 20.683407 40.001573 66.62378 40.001573h56.862305v310.865469c0 70.651243 50.718718 137.138499 122.735202 137.138499h165.262473v-329.023179c0-35.223228-5.256179-55.019229 30.717931-55.019229h130.653603c35.974111 0 30.717932 19.591214 30.717932 55.019229V1023.931738h165.19421c71.948222 0 122.66694-66.487257 122.66694-137.138499V575.92777h56.862305c45.940373 0 61.845436-29.35269 66.555519-40.001573 6.621421-15.085918 11.809338-51.128291-28.123973-92.836416z m-38.56807 68.944691h-120.823865v371.345663c0 34.813656-22.799531 72.22127-58.773642 72.22127H671.835296v-262.399398c0-69.968622-22.663007-117.820333-94.611229-117.820333H446.638726c-71.948222 0-94.542967 47.851711-94.542967 117.820333V955.669668H250.931371c-35.974111 0-58.705381-37.407615-58.705381-72.357795V512.102734H71.265601c-1.228717 0-2.116124-4.30051-3.071793-4.437034 2.252648-3.822676 6.075324-13.51589 12.423697-20.069049L468.755637 87.376133A61.367601 61.367601 0 0 1 512.648148 68.262753a60.070622 60.070622 0 0 1 42.868581 19.11338l387.933345 400.015732c6.348373 6.553159 10.171048 16.246373 12.287173 20.069049-0.819145 0.136524-1.843076 4.437035-3.071793 4.437034z" p-id="5469" fill="#ffffff"></path></svg>
        </div>
      </div>
  </div>
  <div class="back" @click="back">
    <!-- <i class="el-icon-error">退出</i> -->
  </div>
  
</div>
</template>

<script>


export default {
  data() {
    return {
      
    };
  },
  mounted() {},
  methods: {
    // 菜单弹出和隐藏
    showMenu(){
      classie.toggle( this.$refs.menuLeft, 'menu-open')
    },
    // 综合分析的三个侧边栏的弹出和隐藏
    showCenterL(){
      this.$store.commit('increase')
    },
    // 子系统菜单弹出和隐藏
    showChild(){
      // console.log(this.$store.state.childIsShow);
      this.$store.commit('showChild')
    },
    back(){

    }
  }
};
</script>

<style lang="less" scoped>
.centerLeft1{
  width: 4rem;
  height: 16rem;
  position: fixed;
  left: -3.4rem;
  transition: 0.3s;
  .menu{
    width: 3rem;
    height: 16rem;
    float: left;
    background-color: rgba(7, 114, 177,0.9);
  }
  .button{
    width: 0.8rem;
    height: 12rem;
    float: left;
    .button-box{
      width: 100%;
      height: 0.75rem;
      margin-top: 6rem;
      position: relative;
      background: rgb(7, 114, 177);
      background: linear-gradient(-45deg,transparent 22px,#0772B1 0) bottom right,
              linear-gradient(45deg,transparent 22px,#0772B1 0) bottom left,
              linear-gradient(135deg,transparent 22px,#0772B1 0) top left,
              linear-gradient(-135deg,transparent 22px,#0772B1 0) top right;
      background-size: 51% 51%;
      background-repeat: no-repeat;
      .icons{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-26%,-28%);
      }
    }
  }

  .menu-box{
    width: 3rem;
    height: 8rem;
    float: left;
    margin-top: 2.75rem;
    display: grid;
    grid-template-columns: repeat(1,99%);
    grid-template-rows: repeat(8,10%);
  }
  .item{
    position: relative;
    &:hover{
       background-color: rgb(4, 69, 107) !important;
    }
  }
  .text{
    width: 1.5rem;
    height: 0.45rem;
    font-size: 0.2rem;
    line-height: 0.45rem;
    color: white;
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(-50%,-50%)
  }

  .back{
    width: 3rem;
    height: 0.75rem;
    position: absolute;
    top: 13rem;
     &:hover{
       background-color: rgb(4, 69, 107) !important;
    }
    border: 2px solid yellowgreen;
  }
}
.centerLeft1.menu-open{
  left: 0rem;
  transition: 0.3s;
}
  
</style>